<style scoped>
	.nav1,.nav2{
		width:50%;
		display:inline-block;
		text-align: center;
		font-size: 16px;
		height:44px;
		line-height: 44px;
		color:#A5A5A5;
		background-color:#FFFFFF;
	}
	#nav1,#nav2{
		display: none;
		width: 90%;
		margin-left:5%;
	}
	input.nav1{
		position: absolute;
		z-index: 2;
		left:0;
		opacity: 0;
	}
	input.nav2{
		position: absolute;
		z-index: 2;
		left:50%;
		opacity: 0;
	}
	input.nav1:checked ~div.nav1,input.nav2:checked ~div.nav2{
		color:#FDA648;
		border-bottom:2px solid red;
	}
	input.nav1:checked ~ div#nav1,input.nav1:checked ~div.baoming,input.nav2:checked ~ div#nav2{
		display: block;
	}
	.detail_head{
		position: relative;
		margin-top: 10px;
	}
	.detail_head>img{
		max-width: 100%;
		min-width: 100%;
		z-index: -1;
	}
	
	.instruction{
		position: absolute;
		bottom:0;
		color:white;
		margin-left:5%;
		margin-bottom:15px;
		width:90%;
	}
	.instruction .title{
		font-size: 28px;
	}
	.instruction .userinfo {
		display: inline-block;
		vertical-align: middle;
	}
	.instruction .userinfo .name{
		font-size: 16px;
		font-weight: 100;
		
	}
	img.headimg{
		display:inline-block;
		vertical-align: middle;
	}
	.instruction .userinfo .time{
		font-size: 12px;
		font-weight: 100;
	}
	.calling {
    position: relative;
    bottom: -30px;
    width: 50%;
    display: inline-block;
    right: -5.5%;
    text-align: right;
	}
	.calling>img{
		max-width: 100%;
		min-width: 100%;
	}
	.contactor{
		margin-top: 20px;
	}
	.entertime{
		margin-top: 10px;
		display:inline-block;
	}
	.cost{
		display:inline-block;
		margin-top: 10px;
		margin-right: 0;
	}
	.activityinfobox{
		background-color:#fff;
		padding:10px;
	}
	.activityinfobox .inner{
		background-color:#2FBA81;
		color:white;
		padding:10px 15px;

	}
	.activityinfobox .inner .route{
		text-align: justify;
		width:80%;
		margin-left: 10%;
		height:44px;
	}
	.activityinfobox .inner hr{
		margin:10px auto;
	}
	.activityinfobox .inner .start{
		display:inline-block;
		text-align: center;
		vertical-align: middle;
	}
	.activityinfobox .inner .transport{
		display:inline-block;
		text-align: center;
		vertical-align: middle;
	}
	.activityinfobox .inner .end{
		display:inline-block;
		text-align: center;
		vertical-align: middle;
	}
	.activityinfobox .schedule .dateinfo {
		position: relative;
		margin-top:5px;
	}
	.activityinfobox .schedule .dateinfo .date{
		display:inline-block;
	}
	.activityinfobox .schedule .dateinfo .take{
		position: absolute;
		right:0;
		display:inline-block;
	}
	.activityinfobox .meetaddr{
		margin-top: 10px;
		color:#939393;
	}
	.activityinfobox .meettimeandcount{
		width:90%;
		position: relative;
		margin-top:10px;
		color:#939393;
	}
	.activityinfobox .meettimeandcount .meettime{
		display:inline-block;
	}
	.activityinfobox .meettimeandcount .count{
		display:inline-block;
		position: absolute;
		right:0;
	}
	.jianjie{
		background-color:#fff;
		margin-bottom: 10px;
		position: relative;
		line-height: 44px;
	}
	.jianjie .nav,.jianjie .head{
		width: 100%;
		height: 44px;
		top:0;
	}
	.jianjie .nav{
		position: absolute;
		z-index: 1;
		opacity: 0;
	}
	.jianjie .head{
		position: relative;
		padding-left: 10px;
		padding-right: 10px;
		text-align: justify;
	}
	.jianjie .title {
    display: inline-block;
    font-size: 16px;
    color:#FD922A;
	}

	.jianjie img.arrow {
    line-height: 44px;
	}
	.jianjie .content{
		padding-left:10px;
		line-height: 1.5;
		display: none;
	}
	.huodong .nav:checked ~ .content{
		display: block;
	}
	.jianjie hr{
		margin:0;
	}
	.circles{
		text-align: justify;
		width:100%;
		margin-top:10px;
	}
	.circles .circle{
		display: inline-block;
		width: 32px;
		height:32px;
		background-color: #FD8C25;
		border-radius: 50%;
	}
	.share{
		text-align: justify;
		width:100%;
	}
	.wechat {
	  display: inline-block;
	}

	.friend {
	  display: inline-block;
	  margin-left: 10px;
	}
	.baoming{
		display:none;
		background-color: #FD8C25;
    color: #fff;
    width: 100%;
    height: 64px;
    line-height: 64px;
    text-align: center;
    font-size: 18px;
	}
	.user{
    display: inline-block;
    width: 50%;
	}
</style>
<style>
	html,body{
        width: 100%;
        height: 100%;
        overflow: scroll;
        margin:0;
        padding:0;
        font-size: 16px;
        background-color:#f4f4f4;
        -webkit-text-size-adjust:none;
    }
</style>
<template>
	<input type="radio" class="nav1" name="nav" checked="checked"><div class="nav1">基本信息</div><!-- 
	 --><input type="radio" class="nav2" name="nav"><div class="nav2">直播</div>
	<div id="nav1">
		<div class="detail_head">
			<img src="../resource/images/activities/detail_head.png">
			<div class="instruction">
				<div class="title">{{activity.name}}</div>
				<div class="user">
					<img :src="activity.ownerInfo.headimgurl" height="28" width="28" alt="" class="headimg">
					<div class="userinfo">
						<div class="name">{{activity.ownerInfo.nickname}}</div>
						<div class="time">
							<span class="glyphicon glyphicon-time"></span>
							<span>昨天</span>
							<span>12:20</span>
						</div>
					</div>
					<i style="display:inline-block;width:0;height:100%;vertical-align:middle;"></i>
				</div><!-- 
				 --><div class="calling">
					<img src="../resource/images/activities/calling.png" alt="" id="calling">
				</div>
			</div>
		</div>
		<div class="contactor">
			<img src="../resource/images/activities/contactor.png" height="16" width="16" alt="">
			<span style="color:#5F5959">联系人</span>
			<span style="margin-left:5px;margin-right:5px;color:#FC942D">{{activity.contact.name}}</span>
			<span style="color:#FC942D">{{activity.contact.phone}}</span>
		</div>
		<div style="width:100%;text-align:justify;">
			<div class="entertime">
				<img src="../resource/images/activities/eye.png" height="16" width="16" alt="">
				<span style="color:#5F5959">报名截止</span>
				<span style="color:#FC942D;margin-left:5px;">{{activity.time.signupTime}}</span>
			</div>
			<div class="cost">
				<img src="../resource/images/activities/mountain.png" height="16" width="16" alt="">
				<span style="color:#5F5959">活动费用</span>
				<span style="color:#FC942D;margin-left:5px;">{{activity.charge.chargeType}}</span>
			</div>
			<i style="display:inline-block;width:100%;height:0;"></i>
		</div>
		<div class="activityinfobox">
			<div class="inner">
				<div class="route">
					<div class="start">
						<div style="font-size:12px;font-weight:100">出发地</div>
						<div style="font-size:12px;font-weight:100">{{activity.address.start}}</div>
					</div>
					<img src="../resource/images/activities/tranport.png" height="8" width="25" alt="" class="transport">
					<div class="end">
						<div style="font-size:12px;font-weight:lighter">露营地</div>
						<div style="font-size:12px;font-weight:lighter">{{activity.address.end}}</div>
					</div><!-- 
					
					 --><i style="display:inline-block;width:100%;height:0"></i>
				</div>
				<hr>
				<div class="schedule">
					<div style="font-size:12px;">行程日程</div>
					<div class="dateinfo" style="font-size:12px;">
						<div class="date">
							<span>{{activity.time.activitystart}}</span>
							<span>至</span>
							<span>{{activity.time.activityend}}</span>
						</div>
						<div class="take">
							<span>2天</span>
						</div>
					</div>
				</div>
			</div>
			<div class="meetaddr">
				<span style="font-size:12px;">集合地点:</span><span style="font-size:14px;margin-left:5px;">{{activity.address.rendezvous}}</span>
			</div>
			<div class="meettimeandcount">
				<div class="meettime">
					<span style="font-size:12px;">集合时间:</span>
					<span style="margin-left:5px;font-weight:lighter">9:00</span>
					<span style="font-weight:lighter">AM</span></div>
				<div class="count">
					<span style="font-size:12px;">预约人数:</span><span style="margin-left:5px;font-weight:lighter">{{activity.membercount}}人</span>
				</div>
			</div>
		</div>
		<hr>
		<div class="huodong">
			<div class="jianjie">
				<input type="radio" name="huodong_nav" class="nav" checked="checked">
				<div class="head">
					<div class="title">【简介】</div>
					<img src="../resource/images/activities/arrow_down.png" height="12" width="21" class="arrow"></img>
					<i style="display:inline-block;width:100%;height:0"></i>
				</div>
				<hr>
				<div class="content">
					{{activity.placeInfo.desc}}
				</div>
			</div>
			<div class="jianjie">
				<input type="radio" name="huodong_nav" class="nav">
				<div class="head">
					<div class="title">【行程安排】</div>
					<img src="../resource/images/activities/arrow_down.png" height="12" width="21" class="arrow"></img>
					<i style="display:inline-block;width:100%;height:0"></i>
				</div>
				<hr>
				<div class="content">
					{{activity.plan}}
				</div>
			</div>
			<div class="jianjie">
				<input type="radio" name="huodong_nav" class="nav">
				<div class="head">
					<div class="title">【个人装备】</div>
					<img src="../resource/images/activities/arrow_down.png" height="12" width="21" class="arrow"></img>
					<i style="display:inline-block;width:100%;height:0"></i>
				</div>
				<hr>
				<div class="content">
					{{activity.equipment}}
				</div>
			</div>
			<div class="jianjie">
				<input type="radio" name="huodong_nav" class="nav">
				<div class="head">
					<div class="title">【注意事项】</div>
					<img src="../resource/images/activities/arrow_down.png" height="12" width="21" class="arrow"></img>
					<i style="display:inline-block;width:100%;height:0"></i>
				</div>
				<hr>
				<div class="content">
					{{activity.tips}}
				</div>
			</div>
			<div class="jianjie">
				<input type="radio" name="huodong_nav" class="nav">
				<div class="head">
					<div class="title">【免责申明】</div>
					<img src="../resource/images/activities/arrow_down.png" height="12" width="21" class="arrow"></img>
					<i style="display:inline-block;width:100%;height:0"></i>
				</div>
				<hr>
				<div class="content">
					{{activity.statement}}
				</div>
			</div>
		</div>
		<hr style="margin-bottom:0;">
		<div class="yibaomingrenshu">
			<span>已报名人数:</span><span style="margin-left:5px;">{{activity.membercount}}人</span>
		</div>
		<div class="circles">
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="circle"></div>
			<i style="display:inline-block;width:100%;height:0"></i>
		</div>
		<div class="share">
			<div style="display:inline-block">分享至:</div>
			<div style="display:inline-block">
				<div class="wechat">
					<img src="../resource/images/detail/detail_wechat.png" width="32" height="32">
					<span>微信好友</span>
				</div>
				<div class="friend">
					<img src="../resource/images/detail/detail_frient_circle.png" width="32" height="32">
					<span>朋友圈</span>
				</div>
			</div>
			<i style="display:inline-block;width:100%;height:0"></i>
		</div>
	</div>
	<div class="baoming" @click="enroll">我要报名</div>
	<div id="nav2">nav2</div>
</template>
<script>
	var storage = window.localStorage;
	var activities = JSON.parse(storage.getItem("activities"));
	module.exports = {
		data:function(){
			return {
				activity:{
					
					ownerInfo:{},
					time:{},
					contact:{},
					address:{},
					charge:{},
					placeInfo:{},
					ownerInfo:{}
				}
			}
		},
		methods:{
			enroll:function(){
				this.$router.go({name:"enroll",params:{id:this.activity._id}});
				storage.setItem("activity",JSON.stringify(this.activity))
			}
		},
		ready:function(){
			var jssdk = require('../utils/jssdk.js');
			jssdk(this);
			var vue = this;
			var index = this.$route.params.index;
			vue.activity = activities[index];
		}
	}
</script>